<template>
  <div class="component-two">
    <!-- 多行文本输入框 textarea -->
    <el-input
      v-if="formItem.componentType === 'textarea'"
      v-model="formItem.setValue"
      type="textarea"
      autosize
      :placeholder="`请填写${formItem.setName}`"
      :disabled="forbidEditFieldFn(formItem.setKey)"
      @input="handleChange"
    ></el-input>

    <!-- 单选框 radio -->
    <el-radio-group
      v-if="formItem.componentType === 'radio'"
      v-model="formItem.setValue"
      placeholder="请选择"
      :disabled="forbidEditFieldFn(formItem.setKey)"
      @change="handleChange"
    >
      <el-radio v-if="formItem.customData" :key="item.key" :label="item.key">{{
        item.value
      }}</el-radio>
    </el-radio-group>

    <!-- 多选框 checkbox -->
    <el-checkbox-group
      v-if="formItem.componentType === 'checkbox'"
      v-model="formItem.setValue"
      placeholder="请选择"
      :disabled="forbidEditFieldFn(formItem.setKey)"
      @change="handleChange"
    >
      <el-checkbox
        v-for="item in formItem.customData"
        :key="item.key"
        :label="item.key"
        >{{ item.value }}</el-checkbox
      >
    </el-checkbox-group>

    <!-- 上传文件 upload -->
    <el-upload
      v-if="formItem.componentType === 'upload'"
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-success="handleSuccess"
      :file-list="fileList"
      :multiple="true"
      :limit="3"
      :show-file-list="false"
    >
      <i class="el-icon-upload"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  props: {
    formItem: {
      type: Object,
      default: () => {}
    },
    forbidEditField: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleChange(val) {
      this.formItem.setValue = val;
      this.$emit(
        'change',
        this.formItem.setKey,
        JSON.stringify(this.formItem.setValue)
      );
    },
    forbidEditFieldFn(key) {
      return this.forbidEditField.includes(key);
    },
    handleSuccess() {}
  }
};
</script>

<style lang="scss" scoped></style>
